<template>
  <view>
    <view class="prodcut-list-wrap top-box">
      <view class="inner-tab">
        <view :class="type_active=='shop'?'item active':'item'" @click="tabTypeFunc('shop')">
          <view class="box">商家</view>
        </view>
        <view :class="type_active=='business'?'item active':'item'" @click="tabTypeFunc('business')">
          <view class="box">
            <text>商圈</text>
          </view>
        </view>
      </view>

      <view class="list-container">
        <scroll-view v-if="type_active == 'shop'" scroll-y="true" class="scroll-Y"  lower-threshold="50"
                     :refresher-triggered="triggered" @scrolltolower="scrolltolowerFunc" refresher-enabled="true" @refresherrefresh="onRefresh"
                     @refresherrestore="onRestore">
          <view class="shop_list_body">
            <view class="shop_list_body_item" v-for="(item,index) in shopData" :key="index">
              <view class="shop_list_body_item_shop" @click="goto_shop(item.shopSupplierId)">
                <view class="shop_list_body_item_shop_logo">
                  <image :src="item.logoFilePath"></image>
                </view>
                <view class="shop_list_body_item_shop_info">
                  <view class="h1 title">{{item.name}}</view>
                  <view class="h3 brand">主营：{{item.categoryName}}</view>
                  <view class="h3 sales">销量：{{item.productSales}}件<text class="ml10 mr10">| </text>关注：{{item.favCount}}</view>
                  <view class="h3 sales">商圈：{{item.shopBusinessName}}</view>
                </view>
                <view class="shop_list_body_item_shop_others">
                  <view class="f26 gray3 collect">关注{{item.favCount}}</view>
                </view>
              </view>

              <scroll-view class="product-list" scroll-x style="margin: 20upx 0">
                <view v-if="shopData[index].productList.length>0" :class="shopData[index].productList.length<3?'shop_list_body_item_product2':'shop_list_body_item_product'">
                  <view class="shop_list_body_item_product_item" v-for="(item2,index2) in shopData[index].productList" :key="index2"
                        @click="goto_product(item2.productId)">
                    <view>
                      <image :src="item2.productImage"></image>
                    </view>
                    <view class="shop_list_body_item_product_item_price">
                      <view class="f22 red">¥
                        <text class="f32">
                          {{item2.productPrice}}
                        </text></view>
                    </view>
                  </view>
                </view>
                <view v-else class='shop_list_body_item_product_item'  @click="goto_shop(item.shopSupplierId)">
                  <view>
                    <image mode="aspectFit" src="/static/shop/product-empty.png"></image>
                  </view>
                  <view style="margin: 20upx;">商家未上架优惠</view>
                </view>
              </scroll-view>

            </view>
          </view>
          <!-- 没有记录 -->
          <view class="d-c-c p30" v-if="shopData.length==0 && !loading">
            <text class="iconfont icon-wushuju"></text>
            <text class="cont">亲，暂无相关记录哦</text>
          </view>
          <uni-load-more v-else :loadingType="loadingType"></uni-load-more>
        </scroll-view>

        <scroll-view v-else scroll-y="true" class="scroll-Y"  lower-threshold="50"
                     :refresher-triggered="businessTriggered"
                     @scrolltolower="businessScrolltolowerFunc"
                     refresher-enabled="true" @refresherrefresh="businessOnRefresh"
                     @refresherrestore="businessOnRestore">
          <view class="business-circle" v-for="(circle, index) in business.list" :key="index" @click="navToPage(circle)">
            <swiper :indicator-dots="true" :autoplay="false" :interval="3000" :duration="500" class="swiper-container" @click="navToPage(circle)">
              <swiper-item v-for="(image, index) in circle.image" :key="index">
                <image :src="image.filePath" class="business-swiper-image" mode="aspectFill"></image>
              </swiper-item>
            </swiper>
            <view class="circle-name">
              <view class="info-left">
                {{ circle.businessName }}
              </view>
              <view class="info-right">
                <image class="location-icon" src="/static/icon/address_icon.png" mode="aspectFit"></image>
                <text class="location-text">{{ circle.district }}</text>
              </view>
            </view>
            <view class="tip">{{ circle.businessKeyword }}</view>
          </view>
          <!-- 没有记录 -->
          <view class="d-c-c p30" v-if="business.list.length == 0 && !business.loading">
            <text class="iconfont icon-wushuju"></text>
            <text class="cont">亲，暂无相关记录哦</text>
          </view>
          <uni-load-more v-else :loadingType="loadingType"></uni-load-more>
        </scroll-view>
      </view>
      <tabBar></tabBar>
    </view>
  </view>
</template>

<script>
import uniLoadMore from "@/components/uni-load-more.vue";
import businessUtils from "@/common/businessUtils";
export default {
  components: {
    uniLoadMore
  },
  data() {
    return {
      triggered: true,
      businessTriggered: true,
      /*手机高度*/
      phoneHeight: 0,
      /*可滚动视图区域高度*/
      scrollviewHigh: 0,
      /*状态选中*/
      state_active: -1,
      no_more: false,
      loading: true,
      /*最后一页码数*/
      last_page: 0,
      /*当前页面*/
      page: 1,
      /*每页条数*/
      list_rows: 10,
      /*顶部刷新*/
      topRefresh: false,
      /*类别选中*/
      type_active: 'shop',
      /*价格选中*/
      price_top: false,
      /*店铺列表*/
      shopData: [],
      /*当前页面*/
      searchtxt: '',
      keyWord: '',
      stateTab: false,
      height:0,
      isFixed:true,
      business:{
        pageIndex: 1,
        pageSize:10,
        lastPage:1,
        list:[],
        noMore:false,
        _freshing:false,
        loading:false,
      },
      likeCountList: {}

    };
  },
  computed: {
    /*加载中状态*/
    loadingType() {
      if (this.loading) {
        return 1;
      } else {
        if (this.shopData.length != 0 && this.no_more) {
          return 2;
        } else {
          return 0;
        }
      }
    }
  },
  onShow() {
    this.getTabBarLinks();
  },
  mounted() {
    this.init();
    this.likeCountList = businessUtils.getLikeCountList();
    this._freshing = false;
    this.restoreData();
    /*获取订单列表*/
    this.getData();
    this.getBusinessList();
  },
  methods: {
    /*初始化*/
    init() {
      let self = this;
      uni.getSystemInfo({
        success(res) {
          self.phoneHeight = res.windowHeight;
          // 计算组件的高度
          let view = uni.createSelectorQuery().in(self).select('.top-box');
          view.boundingClientRect(data => {
            console.log(data)
            let h = self.phoneHeight - data.height;
            self.scrollviewHigh = h;
          }).exec();
        }
      });

    },
    /*还原初始化*/
    restoreData() {
      this.shopData = [];
      this.page = 1;
      this.no_more = false;
      this.loading = true;
      this.category_id = 0;
      this.searchtxt = '';
      this.sortType = '';
      this.sortPrice = 0;
    },

    /*类别切换*/
    tabTypeFunc(e) {
      let self = this;
      self.shopData = [];
      self.page = 1;
      self.no_more = false;
      self.loading = true;
      self.type_active = e;
      self.getData();
    },

    /*获取数据*/
    /*getData() {
      let self = this;
      let page = self.page;
      let list_rows = self.list_rows;
      self.loading = true;
      self._postBody('user/favorite/list', {
        pageIndex: page || 1,
        pageSize: list_rows,
        sortType: self.type_active,
        name: self.keyWord
      }, (res) => {
        self.loading = false;
        self.last_page = res.data.lastPage;
        self.shopData = self.shopData.concat(res.data.records);
        if (res.data.lastPage <= 1) {
          self.no_more = true;
        } else {
          self.no_more = false;
        }
      })
    },*/

    getData() {
      let self = this;
      self._postBody('user/favorite/list', {
        pageIndex: self.page,
        type: 10,
        pageSize: 15,
      }, (res) => {
        self.loading = false;
        self.shopData = self.shopData.concat(res.data.records);
        self.last_page = res.data.lastPage;
        if (res.data.lastPage <= 1) {
          self.no_more = true;
        } else {
          self.no_more = false;
        }
      })
    },


    onRefresh() {
      if (this._freshing) return;
      this._freshing = true;
      this.restoreData();
      this.getData();
      setTimeout(() => {
        this.triggered = false;
        this._freshing = false;
      }, 2000)
    },
    onRestore() {
      this.triggered = 'restore'; // 需要重置
    },
    /*搜索*/
    search() {
      let self = this;
      self.keyWord = self.searchtxt;
      self.restoreData();
      self.getData();
    },
    /*可滚动视图区域到底触发*/
    scrolltolowerFunc() {
      let self = this;
      if (self.no_more) {
        return;
      }
      self.page++;
      if (self.page <= self.last_page) {
        self.getData();
      } else {
        self.no_more = true;
      }
    },
    businessOnRestore() {
      this.businessTriggered = 'restore'; // 需要重置
    },
    businessOnRefresh() {
      if (this.business._freshing) return;
      this.business._freshing = true;
      this.restoreBusinessData();
      this.getBusinessList();
      setTimeout(() => {
        this.business.triggered = false;
        this.business._freshing = false;
      }, 2000)
    },
    restoreBusinessData() {
      this.business.shopData = [];
      this.business.pageIndex = 1;
      this.business.noMore = false;
      this.business.loading = true;
      this.business.category_id = 0;
      this.business.searchtxt = '';
      this.business.sortType = '';
      this.business.sortPrice = 0;
    },
    businessScrolltolowerFunc(){
      let self = this;
      if (self.business.noMore) {
        return;
      }
      self.business.pageIndex++;
      if (self.business.pageIndex <= self.business.last_page) {
        self.getBusinessList();
      } else {
        self.business.noMore = true;
      }
    },

    //跳转店铺首页
    goto_shop(shopSupplierId) {
      this.gotoPage('/pages/shop/shop?shopSupplierId=' + shopSupplierId);
    },
    //跳转商品页面
    goto_product(productId) {
      this.gotoPage('/pages/product/detail/detail?productId=' + productId);
    },
    getBusinessList(){
      let self = this;
      let pageIndex = self.business.pageIndex;
      let pageSize = self.business.pageSize;
      self.business.loading = true;
      self._postBody('business/business/list', {
        pageIndex: pageIndex || 1,
        pageSize: pageSize,
        districtId: self.currentDistrictId,
        isRecommend: self.isRecommend,
        isFollow: 1
      }, (res) => {
        self.business.loading = false;
        self.business.lastPage = res.data.lastPage;
        res.data.records.forEach(item=>{
          if (self.likeCountList[businessUtils.likeCountKeyName+item.businessId] && self.likeCountList[businessUtils.likeCountKeyName+item.businessId] == 1){
            item.isLikeCount = true;
          }else{
            item.isLikeCount = false;
          }
        })
        self.business.list = self.business.list.concat(res.data.records);
        if (res.data.lastPage <= pageIndex) {
          self.business.noMore = true;
        } else {
          self.business.noMore = false;
        }
      })
    },
    navToPage(row) {
      uni.navigateTo({
        url: '/pages/shop/business_shopList?shopBusinessId=' + row.businessId,
      });
    },
  }
};
</script>

<style lang="scss" scoped>
page {
  background: #f2f2f2;
}

.foot_ {
  height: 98rpx;
  width: 100%;
}

.seacth {
  width: 750rpx;
  height: 110rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}


.seacth input {
  width: 675rpx;
  height: 70rpx;
  border: 1px #D7D7D7 solid;
  border-radius: 20rpx;
  background-color: white;
  display: flex;
  align-items: center;
  padding-left: 20rpx;
  font-size: 24rpx !important;
}

.seacth input::before {
  margin-right: 10rpx;
  font-size: 24rpx !important;
}

.inner-tab {
  width: 100%;
  position: fixed;
  height: 100rpx;
  line-height: 100rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #ffffff;
  z-index: 9;
}

.list-container{
  padding-top: 80rpx;
}

.inner-tab .item {
  flex: 1;
  font-size: 30rpx;
  height: 100%;
  line-height: 80rpx;
  position: relative;
  color: #666666;
}

.inner-tab .item.active,
.inner-tab .item .arrow.active .iconfont {
  color: #333333;
}

.inner-tab .item.active::after {
  content: '';
  width: 72rpx;
  height: 4rpx;
  @include background_color('background_color');
  border-radius: 2rpx;
  position: absolute;
  bottom: 14rpx;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #0A98D5;
}

.inner-tab .item .box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.inner-tab .item .arrows {
  margin-left: 10rpx;
  line-height: 0;
}

.inner-tab .item .iconfont {
  line-height: 24rpx;
  font-size: 24rpx;
}

.inner-tab .item .arrow,
.inner-tab .item .svg-icon {
  width: 20rpx;
  height: 20rpx;
}

.prodcut-list-wrap {
  // padding-bottom: 98rpx;
}

.prodcut-list-wrap .list {
  background: #FFFFFF;
}

.prodcut-list-wrap .list .item {
  padding: 20rpx;
  display: flex;
  border-bottom: 16rpx solid #f6f6f6;
}

.prodcut-list-wrap .product-cover,
.prodcut-list-wrap .product-cover image {
  width: 220rpx;
  height: 220rpx;
}

.prodcut-list-wrap .product-info {
  flex: 1;
  margin-left: 30rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.prodcut-list-wrap .product-title {
  display: -webkit-box;
  line-height: 40rpx;
  height: 80rpx;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 32rpx;
}

.prodcut-list-wrap .already-sale {
  margin-top: 20rpx;
  color: #999;
  font-size: 24rpx;
}

.prodcut-list-wrap .already-sale>text {
  padding: 6rpx 10rpx;
  background-color: #f2f2f7;
}

.prodcut-list-wrap .price {
  @include font_color('price_color');
  font-size: 24rpx;
}

.prodcut-list-wrap .price .num {
  margin-left: 6rpx;
  padding: 0 4rpx;
  font-size: 40rpx;
}

// *********************
// *********************
.h1 {
  font-size: 32rpx;
}

.h2 {
  font-size: 28rpx;
}

.h3 {
  font-size: 24rpx;
}

.h4 {
  font-size: 20rpx;
}

.h5 {
  font-size: 16rpx;
}

.h6 {
  font-size: 12rpx;
}

.huaxianjia {
  text-decoration: line-through;
  color: #585858;
  margin-left: 4rpx;
}

.shop_list_body {
  width: 100%;
  // padding: 20rpx;
  box-sizing: border-box;
}

.shop_list_body_item {
  display: flex;
  width: 100%;
  max-height: 470rpx;
  margin-top: 30rpx;
  flex-direction: column;
  background-color: white;
  // border-radius: 20rpx;
  padding: 20rpx;
  // border-bottom: 2rpx #e8e8e8 solid;
  box-sizing: border-box;
}

.shop_list_body_item_shop {
  width: 100%;
  height: 150rpx;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.shop_list_body_item_shop_logo {
  width: 150rpx;
  height: 150rpx;
}

.shop_list_body_item_shop_logo image {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 15rpx;
}

.shop_list_body_item_shop_info {
  padding: 10rpx;
  padding-left: 20rpx;
  box-sizing: border-box;
  padding-top: 0;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  flex: 1;
}

.shop_list_body_item_shop_others {
  padding: 10rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  text-align: right;
  padding-top: 0;
  font-size: 26rpx;
  color: #333333;
}

.shop_list_body_item_product {
  width: 100%;
  height: 280rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  // background-color: #f2f2f2;
  padding: 10rpx;
  box-sizing: border-box;
  // border-radius: 15rpx;
}

.shop_list_body_item_product2 {
  width: 100%;
  height: 280rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  // background-color: #f2f2f2;
  padding: 10rpx;
  box-sizing: border-box;
  border-radius: 15rpx;
}

.shop_list_body_item_product2 .shop_list_body_item_product_item {
  margin: 0 10rpx;
}

.shop_list_body_item_product_item {
  width: 30%;
  background-color: white;
  margin-right: 10upx;
  // border-radius: 10rpx;
  /*overflow: hidden;*/
}

.shop_list_body_item_product_item image {
  width: 210rpx;
  height: 180rpx;
  border-radius: 12rpx;
  background-color: rgba(0, 0, 0, 0.1);
}

.shop_list_body_item_product_item view {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}

.shop_list_body_item_product_item_price {
  padding: 15rpx;
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-size: 32rpx;
}

.brand {
  position: relative;
  color: #585858;
}

.sales {
  color: #585858;
}

.collect {
  margin-bottom: 26rpx;
}


//商圈样式
.business-circles-container {
  padding: 20rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.business-circle {
  flex: 0 0 calc(50% - 10upx);
  box-sizing: border-box;
  margin:20upx 0 20upx 0;
  padding: 0 20upx 0 20upx;
}
.business-circle::after{
  content: '';
  height: 8upx;
  display: block;
  width: 100%;
  border-radius: 2rpx;
  margin: 10upx auto;
  background-color: #dedede;
}

.swiper-container {
  width: 100%;
  height: 200px;
}

.business-swiper-image {
  width: 100%;
  height: 100%;
  border-radius: 16upx;
}

.circle-name {
  font-size: 28upx;
  font-weight: bold;
  margin-top: 20upx;
  display: flex;
  justify-content: space-between;
}

.circle-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.info-left, .info-right {
  display: flex;
  align-items: center;
}
.city{
  display: inline-flex;
  justify-content: center;
  justify-items: center;
}
.location-icon, .like-icon {
  width: 34upx;
  height: 36upx;
  margin-right: 6upx;
  display: inline-flex;
}

.location-text, .like-count {
  font-size: 14px;
  display: inline-flex;
}
.tip{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}
</style>
